<template>
  <el-dialog :title="isAdd ? '新增设备' : '编辑设备'" v-model="dialogVisible" width="515">
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="设备名称" prop="hostName">
        <el-input v-model="formData.hostName" placeholder="请输入设备名称" />
        <!-- <el-button type="primary">新增设备</el-button> -->
      </el-form-item>
      <el-form-item label="设备类型" prop="types">
        <el-select v-model="formData.types" placeholder="请选择设备类型" multiple>
          <el-option :label="getNameCnByName(item.name)" :value="item.groupId" v-for="(item, index) in deviceGroups"
            :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备模版" prop="types">
        <el-select v-model="formData.tids" placeholder="请选择设备类型" multiple>
          <el-option :label="item.name" :value="item.templateId" v-for="(item, index) in templates" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备是否监控" prop="status">
        <el-switch v-model="formData.status" :active-value="0" :inactive-value="1" inline-prompt active-text="是"
          inactive-text="否" />
      </el-form-item>
      <el-form-item label="设备描述" prop="description">
        <el-input v-model="formData.description" placeholder="请输入设备描述" />
      </el-form-item>
      <el-form-item label="ip是否连接" prop="useIp">
        <el-switch v-model="formData.useIp" :active-value="1" :inactive-value="0" inline-prompt active-text="是"
          inactive-text="否" />
      </el-form-item>
      <template v-if="formData.useIp === 1">
        <el-form-item label="ip地址" prop="ip">
          <el-input v-model="formData.ip" placeholder="请输入ip地址" />
        </el-form-item>
        <el-form-item label="端口号" prop="port">
          <el-input v-model="formData.port" placeholder="请输入端口号" />
        </el-form-item>
      </template>
      <el-form-item label="Dns" prop="dns" v-else>
        <el-input v-model="formData.dns" placeholder="请输入dns" />
      </el-form-item>
      <el-form-item label="接口信息" prop="details">
        <el-button type="primary" @click="handleOpenDetail">设置接口信息</el-button>
      </el-form-item>
      <!-- <el-form-item label="起始位置" prop="position">
        <el-input v-model="formData.position" placeholder="请输入起始位置" />
      </el-form-item>
      <el-form-item label="占用U位" prop="u">
        <el-input v-model="formData.u" placeholder="请输入占用U位" />
      </el-form-item>
      <el-form-item label="设备图片" prop="fileList">
        <el-upload
          v-model:file-list="formData.fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-button :icon="Picture">点击上传图片</el-button>
        </el-upload>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd(formRef)">确认 </el-button>
      </span>
    </template>
  </el-dialog>
  <AddDetailDialog ref="addDetailDialogRef" @change="handleDetailChange"></AddDetailDialog>
</template>
<script setup>
import { reactive, ref, defineEmits } from "vue";
import { getDeviceGroup, createDevice, updateDevice } from "@/api/facility";
import { getTemplateList } from "@/api/template";
import AddDetailDialog from "./AddDetailDialog.vue";
import { ElMessage } from "element-plus";
import { getNameCnByName } from "@/utils/const";
const emit = defineEmits(["success"]);
const isAdd = ref(true);
const addDetailDialogRef = ref();
const dialogVisible = ref(false);
const deviceGroups = ref([]);
const templates = ref([])
const formRef = ref();
const formData = reactive({
  hostName: "",
  types: "",
  description: "",
  useIp: 1,
  status: 0,
  ip: "",
  port: "",
  dns: "",
  details: {},
});
const rules = {
  hostName: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  types: [{ required: true, message: "请选择设备类型", trigger: "change" }],
  status: [{ required: true, message: "请选择设备状态", trigger: "change" }],
  useIp: [{ required: true, message: "请选择ip是否连接", trigger: "change" }],
  ip: [{ required: true, message: "请输入ip地址", trigger: "change" }],
  port: [{ required: true, message: "请输入端口", trigger: "change" }],
  dns: [{ required: true, message: "请输入dns", trigger: "change" }],
  details: [{ required: true, message: "请设置接口信息", trigger: "change" }],
  // position: [{ required: true, message: "请输入起始位置", trigger: "blur" }],
  // u: [{ required: true, message: "请输入占用U位", trigger: "blur" }],
  // fileList: [{ required: true, message: "请上传设备图片", trigger: "change" }],
};

//获取接口信息
const handleDetailChange = (data) => {
  formData.details = data;
};

//获取设备分组
const getDeviceGroupList = async () => {
  const res = await getDeviceGroup();
  console.log(res, 123)
  deviceGroups.value = res.data;
};
//获取模版列表
const getTemplateListData = async () => {
  const res = await getTemplateList();
  templates.value = res.data;
}

//添加设备
const handleAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      //接口信息
      const interfaces = {
        ip: formData.ip,
        port: formData.port,
        dns: formData.dns,
        useIp: formData.useIp,
        details: formData.details,
      };
      if (interfaces.useIp === 0) {
        delete interfaces.ip;
        delete interfaces.port;
      } else {
        delete interfaces.dns;
      }
      //请求参数
      const params = {
        status: formData.status,
        hostName: formData.hostName,
        groups: formData.types.map((x) => ({ groupId: x })),
        description: formData.description,
        interfaces,
        templates: templates.value.filter(x => formData.tids.includes(x.templateId)),
      };
      if (isAdd.value) {
        await createDevice(params);
        ElMessage.success("添加成功");
      } else {
        params.hostId = formData.hostId;
        await updateDevice(params);
        ElMessage.success("编辑成功");
      }
      emit("success");
      dialogVisible.value = false;
    }
  });
};
//打开弹窗
const handleOpen = (data) => {
  if (data) {
    isAdd.value = false;
    formData.hostName = data.hostName;
    formData.types = data.groups.map((x) => x.groupId);
    formData.description = data.description;
    formData.useIp = data.interfaces.useIp;
    formData.ip = data.interfaces.ip;
    formData.port = data.interfaces.port;
    formData.dns = data.interfaces.dns;
    formData.details = data.interfaces.details;
    formData.templates = data.templates;
    formData.tids = data.templates.map((x) => x.templateId);
    formData.hostId = data.hostId;
    formData.status = data.status;
  } else {
    isAdd.value = true;
    Object.assign(formData, {
      hostName: "",
      types: "",
      description: "",
      useIp: 1,
      status: 0,
      ip: "",
      port: "",
      dns: "",
      tids: [],
      templates: [],
      details: {},
    })
  }
  dialogVisible.value = true;
};
//关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};
//设置接口信息
const handleOpenDetail = () => {
  addDetailDialogRef.value.handleOpen(formData.details);
};
getTemplateListData()
getDeviceGroupList();

defineExpose({
  handleOpen,
  handleClose,
});
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 290px;
}

.el-button {
  margin-left: 5px;
}
</style>